<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .lis {
    margin: 100px 100px;
    width: 300px;
    height: 500px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 20px;
    float: left;
  }

  button {
    width: 100px;
    height: 40px;
    margin-top: 20px;
  }

  .suibian {
    float: left;
    margin-top: 200px;
  }
</style>

<body>
  <div class="lis">
    <h4><input type="checkbox" id="zuo" /> 列表一</h4>
    <ul id="zuo-ul">
      <li><input type="checkbox" name="zuo1" />苹果1</li>
      <li><input type="checkbox" name="zuo1" />苹果2</li>
      <li><input type="checkbox" name="zuo1" />苹果3</li>
    </ul>
  </div>
  <div class="suibian">
    <div><button id="right">→</button></div>
    <div><button id="left">←</button></div>
  </div>
  <div class="lis">
    <h4><input type="checkbox" id="you" /> 列表二</h4>
    <ul id="you-ul">
      <li><input type="checkbox" name="you1" />葡萄1</li>
      <li><input type="checkbox" name="you1" />葡萄2</li>
      <li><input type="checkbox" name="you1" />葡萄3</li>
    </ul>
  </div>
</body>

<script>
    $('#zuo').click(function () {
      var box = $('#zuo').prop('checked')
      console.log($('#zuo-ul input').prop('checked',box))
     
    })

    $('#you').click(function () {
      var box1 = $('#you').prop('checked')
      console.log($('#you-ul input').prop('checked',box1))
    })

    $('#left').click(function () {
      $('#zuo-ul').append($('#you-ul input:checked').parent())   
            $('#zuo').prop('checked',false)
    })
    $('#right').click(function () {
      $('#you-ul').append($('#zuo-ul input:checked').parent())   
             $('#you').prop('checked',false)
    })

</script>

</script>

</html>